<template>
  <div class="staff_wrap">
    <el-table
      :row-style="{ height: '40px' }"
      header-row-style="{height: '10px'}"
      :data="tableData"
      :border="showborder"
      style="width: 100%;"
    >
      <el-table-column type="selection" width="55" fixed> </el-table-column>
      <el-table-column
        v-for="item in cols"
        :prop="item.props"
        :key="item.index"
        :label="item.label"
        :sortable="item.hasOwnProperty('sortable') ? true : false"
      >
      </el-table-column>
      <el-table-column fixed="right" label="操作" width="100">
        <template #header>
          操作&nbsp;&nbsp;<i class="el-icon-s-operation"></i>
        </template>
        <template #default="scope">
          <i
            :class="iconConfig.icon1"
            v-if="hiddenIcon.indexOf(1) == -1? true : false"
            @click.prevent="icon1(scope.$index, tableData)"
          ></i>
          <i
            :class="iconConfig.icon2"
            v-if="hiddenIcon.indexOf(2) == -1? true : false"
            @click.prevent="icon2(scope.$index, tableData)"
          ></i>
          <i
            :class="iconConfig.icon3"
            v-if="hiddenIcon.indexOf(3) == -1? true : false"
            @click.prevent="icon3(scope.$index, tableData)"
          ></i>
          <i
            :class="iconConfig.icon4"
            v-if="hiddenIcon.indexOf(4) == -1? true : false"
            @click.prevent="icon4(scope.$index, tableData)"
          ></i>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
import { watch } from "vue";
export default {
  name: "StaffManagementList",
  props: {
    tableData: {
      type: Array,
      default: () => [],
    },
    cols: {
      type: Array,
      default: () => [],
    },
    //设置标签的显示与隐藏
    hiddenIcon:{
        type:Array,
        default:() => []
    },
    iconConfig: {
      type: Object,
      default: () => {
        return {
          icon1: "el-icon-search",
          icon2: "el-icon-setting",
          icon3: "el-icon-s-platform",
          icon4: "el-icon-delete",
        };
      },
    },
    showborder: {
      type: Boolean,
      default: true,
    }
  },
  setup(props,context) {
    //数据有变动通知更新
    watch(props.tableData, (newVlaue, oldValue) => {
      props.tableData = newVlaue;
      props.cols = newVlaue;
    });
    //四个按钮事件，触发对应事件通知父组件更新状态
    function icon1(i,t) {
      context.emit('icon1',t);
    }
    function icon2(i,t) {
      context.emit('icon2',t);
    }
    function icon3(i,t) {
      context.emit('icon3',t);
    }
    function icon4(i,t) {
      context.emit('icon4',t);
    }
    return{
      icon1,
      icon2,
      icon3,
      icon4
    }
  },
};
</script>

<style lang="less" scoped>
/deep/ .el-table__header tr,
.el-table__header th {
  padding: 0;
  height: 30px;
  line-height: 30px;
}
.el-table__body tr,
.el-table__body td {
  padding: 0;
  height: 30px;
  line-height: 30px;
}

.staff_wrap {
  width: 100%;
}
</style>
